<template>
	<view class="datum-video fboxCol Ycenter" style="height: 800rpx;">
		<view v-if="!innerData.isBuy && (innerData.price == 0 || (innerData.valuation == 1 && innerData.vipPrice ==0 && isVip) || innerData.isSpecialBuy || !innerData.previewUrl)"
			class='w750 audioPlayer' style="height: 800rpx;">
			<view class='player'>
				<view class='btn fboxRow Xcenter Ycenter' @tap='previewAll'>
					<text class="bksCIcon bks-c-ziyuan37bofang"></text>
				</view>
			</view>
		</view>
		<view class="w750" v-else>
			<video v-if="innerData.format == '.mp4'" class="video" id="myVideo"
				poster="https://bks-view.obs.myhuaweicloud.com/css/bg-video.jpg" :src="eurl"
				@error="videoErrorCallback" controls @ended="ended"></video>
			<block v-else-if="innerData.format == '.mp3'">
				<view class='audioPlayer' style="height: 800rpx;">
					<view class='player'>
						<view class='btn fboxRow Xcenter Ycenter' @tap='_playAudio'>
							<view v-if="isPlayAudio">
								<text class="bksCIcon bks-c-ziyuan38zanting"></text>
							</view>
							<view v-else>
								<text class="bksCIcon bks-c-ziyuan37bofang"></text>
							</view>
						</view>
						<view class="audioControls fboxRow Ycenter font20 color-fff">
							<view class="minbtn" @tap='_playAudio'>
								<text v-if="isPlayAudio" class="bksCIcon bks-c-ziyuan87zanting font24"></text>
								<text v-else class="bksCIcon bks-c-ziyuan151bofang font24"></text>
							</view>
							<view class='flex1 slider fboxWrap Ycenter'>
								<slider style="width:100%;" @change='sliderChange' activeColor='#00C15D'
									block-color="#00C15D" block-size="8" :value='audioTime' />
							</view>
							<view class='time'>{{showTime1}}/{{showTime2}}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- <view v-else class='w750 audioPlayer' style="height: 800rpx;">
    <view class='player'>
      <view class='btn fboxRow Xcenter Ycenter' catchtap='previewAll'>
        <text class="bksCIcon bks-c-ziyuan37bofang"></text>
      </view>
    </view>
  </view> -->
	</view>
</template>

<script>
	let innerAudioContext = null
	// let innerAudioContext = uni.createInnerAudioContext()
	export default {
		props: {
			layoutType: {
				type: [Number, String],
				default: 0 // 0 收藏 | 2课堂 | 3 已购课程
			},
			// 当前项数据
			innerData: {
				type: Object,
				default: () => {
					return {
						// "collectNum": 0,
						// "duration": "",
						// "format": "",
						// "gmtCreate": "",
						// "grade": "",
						// "gradeTags": [],
						// "img": "",
						// "isBuy": false,
						// "isCollected": false,
						// "isPreview": 0,
						// "materialsId": "",
						// "materialsName": "",
						// "materialsTagId": "",
						// "pdfToImgUrl": "",
						// "previewUrl": "",
						// "price": 0,
						// "remark": "",
						// "tags": [],
						// "url": "",
						// "valuation": "",
						// "viewNum": 0,
						// "vipPrice": 0
					}
				}
			}
		},
		watch:{
			'innerData.url':{
				handler(obj){
					const {format, previewUrl, url, isBuy, duration} = this.innerData
					this.audioUrl = isBuy ? url : previewUrl
					if(format == '.mp3'){
						this.durationIntval = ''
						this.audioSeek = 0
						this.audioTime = ""
						this.audioDuration = duration
						this.showTime1 = "00:00"
						this.showTime2 =  "00:00"
						this.isPlayAudio = false
					  this.Initialization()
					}
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				eurl: 'https://bks.obs.cn-north-4.myhuaweicloud.com:443/material%2Fbks65a1d8f0bd5d898fa1722974f8e45c3f.mp3',
				audioDuration: '',
				durationIntval: '',
				audioSeek: 0,
				audioTime: "",
				showTime1: "00:00",
				showTime2: "00:00",
				isPlayAudio: false,
				isVip: false,
				audioUrl: ''
			}
		},
		created() {
			this.Initialization()
		},
		destroyed() {
			innerAudioContext.destroy()
		},
		methods: {
			// 订阅
			previewAll(){
				this.$emit('buy')
			},
			//初始化播放器，获取duration
			Initialization() {
				var t = this;
				if(!innerAudioContext){
					innerAudioContext = uni.createInnerAudioContext();
				}
				if (this.audioUrl) {
					//设置src
					innerAudioContext.src = this.audioUrl;
					//运行一次
					innerAudioContext.onCanplay(() => {
						//初始化duration
						innerAudioContext.duration
						setTimeout(function() {
							//延时获取音频真正的duration
							var duration = innerAudioContext.duration;
							t.audioDuration = duration
							t.showTime2 = t.conversion(duration)
						}, 500)
					})
					innerAudioContext.onPause(() => {
						if (t.isPlayAudio) {
							this._playAudio()
						}
					})
					innerAudioContext.onTimeUpdate((e)=>{
						this.loadaudio()
					})
					innerAudioContext.onEnded((e)=>{
						this.audioSeek= 0
						this.audioTime= 0
						this.isPlayAudio= false
						this.showTime1=`00:00`
					})
				}
			},
			//拖动进度条事件
			sliderChange(e) {
				innerAudioContext.src = this.audioUrl;
				//获取进度条百分比
				var value = e.detail.value;
				this.audioTime = value
				var duration = this.audioDuration;
				//根据进度条百分比及歌曲总时间，计算拖动位置的时间
				value = parseInt(value * duration / 100);
				//更改状态
				this.audioSeek = value
				this.isPlayAudio = true
				//调用seek方法跳转歌曲时间
				innerAudioContext.seek(value);
				//播放歌曲
				innerAudioContext.play();
			},
			// 播放、暂停按钮
			_playAudio() {
				//获取播放状态和当前播放时间
				var isPlayAudio = this.isPlayAudio;
				//更改播放状态
				this.isPlayAudio = !this.isPlayAudio
				if (isPlayAudio) {
					// 如果在播放则记录播放的时间，暂停
					innerAudioContext.pause();
				} else {
					//如果在暂停，获取播放时间并继续播放
					innerAudioContext.play();
				}
			},
			loadaudio() {
				const that = this
				const duration = innerAudioContext.duration;
				const currentTime = innerAudioContext.currentTime
				//当进度条完成，停止播放，并重设播放时间和进度条
				if (time >= 100) {
					innerAudioContext.stop();
					that.audioSeek= 0
					that.audioTime= 0
					that.audioDuration= duration
					that.isPlayAudio= false
					that.showTime1=`00:00`
					that.ended()
					return false;
				}
				//播放时间
				var time = currentTime.toFixed(0)
				that.showTime1 = that.conversion(time)
				//计算进度
				that.audioSeek = ((time/duration).toFixed(2))*100
				that.audioTime = ((time/duration).toFixed(2))*100
			},
			ended() {
				const that = this
				if (!this.innerData.isBuy) {
					uni.showModal({
						title: '提示',
						content: '您未购买资料,请前往购买',
						confirmColor: '#00C15D',
						success(res) {
							if (res.confirm) {
								// wx.showLoading({title: '订阅中'})
								that.$emit('buy')
							} else if (res.cancel) {}
						}
					})
				}
			},
			conversion(duration){
			  var min = parseInt(duration / 60);
			  var sec = parseInt(duration % 60);
			  if (min.toString().length == 1) {
				min = `0${min}`;
			  }
			  if (sec.toString().length == 1) {
				sec = `0${sec}`;
			  }
			  return `${min}:${sec}`
			},
		}
	}
</script>

<style lang="scss" scoped>
	.video {
		width: 750rpx;
		height: 800rpx;
	}

	.audioPlayer {
		width: 100%;
		box-sizing: border-box;
	}

	.player {
		width: 100%;
		height: 100%;
		position: relative;
		width: 100%;
		height: 100%;
		background: url(https://bks-view.obs.myhuaweicloud.com/css/bg-video.jpg) no-repeat center center;
		background-size: 100% 100%;
		z-index: 0;
	}

	.player .btn {
		height: 100%;
	}

	.player .btn .bksCIcon {
		font-size: 108rpx;
		color: #ffffff;
	}

	.audioControls {
		width: 100%;
		height: 80rpx;
		position: absolute;
		bottom: 0;
		text-align: center;
		padding: 0 30rpx;
	}
</style>